<sidebar></sidebar>

<div id="page-content" ng-style="{ 'marginLeft': rootFields.marginSidebar}">
  <topbar></topbar>
  
  <breadcrumb></breadcrumb>

  <messages></messages>
  
  <div class="fadein" ng-show="rootFields.showContent">
    <div id="page-title" class="clearfix">
      <h1 class="pull-left">Organizations</h1>
    </div><!-- /#page-title -->
    
    <div id="page-content-wrap" class="clearfix">
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title pull-left">Organizations <span class="label label-default">{{nrOfOrganizations}}</span></h3>
                    <a ng-click="addOrganization()" class="btn btn-success pull-right" ng-show="rootFields.showOrgCreation"><i class="fa fa-plus"></i>&nbsp; Add a organization</a>
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="organization in organizations" ng-click="showOrg(organization.id, $event)" style="cursor: pointer">
                  <td><a href="#/organizations/{{organization.id}}">{{organization.name}}</a></td>
                  <td>
                    <span class="label" ng-class="organization.status == 'active' ? 'label-success' : 'label-danger'">{{organization.status}}</span>
                  </td>
                  <td>
                    <a class="action action-edit" ng-click="editOrganization(organization); $event.stopPropagation();" title="Edit"><i class="fa fa-lg fa-pencil"></i></a>
                    <a class="action action-delete" ng-show="rootFields.showOrgCreation" ng-click="deleteOrganization(organization); $event.stopPropagation();" title="Delete"><i class="fa fa-lg fa-trash"></i></a>
                  </td>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>
      </div><!-- /.row -->
      
    </div><!-- /#page-content-wrap -->
  </div>
  
</div><!-- /#page-content -->